<template>
  <div>
    <el-card style="margin-left:15px;margin-bottom: 15px;margin-right: 10px ">
      <el-breadcrumb
        separator-class="el-icon-arrow-left"
        style="margin-right: 30px;position:absolute;right:0;ub main-center cross-center"
      >
        <el-breadcrumb-item :to="{ path: '/' }">缴款查询</el-breadcrumb-item>
        <el-breadcrumb-item>配送管理</el-breadcrumb-item>

        <el-breadcrumb-item>调度中心</el-breadcrumb-item>
      </el-breadcrumb>

      <div style="margin-top: 15px;margin-left: 15px;height: 40px;width:550px" >
        <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 150px">
            <el-option label="订单id" value="1"></el-option>
            <el-option label="订购货物信息" value="2"></el-option>
            <el-option label="收购客户信息" value="3"></el-option>
            <el-option label="订购客户信息" value="4"></el-option>
            <el-option label="订单状态" value="5"></el-option>
            <el-option label="备注信息" value="6"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="queryClick()"></el-button>
        </el-input>
      </div>


      <div style="margin-top: 15px;margin-left: 15px;margin-right: 20px;width:1200px;">
        <template>
          <el-table
            :data="tableData.slice((pageInfo.curPage-1)*pageInfo.pageSize,
        pageInfo.curPage*pageInfo.pageSize)"
            style="width: 100%"
            height="450">
            <el-table-column
              prop="id"
              label="订单id"
              width="120">
            </el-table-column>
            <el-table-column
              prop="buyClientInfo"
              label="订购客户信息"
              width="150">
            </el-table-column>
            <el-table-column
              prop="buyCommodityInfo"
              label="订购货物信息"
              width="120">
            </el-table-column>
            <el-table-column
              prop="orderStatus"
              label="订单状态"
              width="120">
            </el-table-column>

            <el-table-column
              prop="orderType"
              label="订单种类"
              width="300">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注信息"
              width="120">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="editRow(scope.$index, tableData)"
                  type="text"
                  size="small">
                  <!--              <el-button type="primary" icon="el-icon-edit" circle></el-button>-->
                  <!--                <el-button type="primary" icon="el-icon-edit"></el-button>-->
                  <el-button type="primary" round>缴款查询</el-button>
                </el-button>
              </template>
            </el-table-column>

          </el-table>
        </template>
      </div>

      <div class="block" style="margin-top: 10px;margin-left: 15px;">
        <!--    <span class="demonstration">完整功能</span>-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.curPage"
          :page-sizes="[4,8,10,20]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </el-card>

  </div>

</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        pageInfo:{
          curPage:1,
          pageSize:4,
        },
        total:0,
        input: '',
        select: '',
      }
    },
    methods:{
      async getMessage()
      {
        let url='/api/dispatching_management/query_all_order/'
        console.log('得到消息')
        const{data:res}=await this.$http.get(url)
        if(res.code!==200)
        {
          return this.$message.error(res.msg)
        }
        else if(res.code==200)
        {
          this.tableData = res.data
          this.total=res.data.length
        }
      },
      editRow(index, rows) {
        // rows.splice(index, 1);
        console.log('编辑按钮'+index+rows);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageInfo.pageSize=val
      },
      handleCurrentChange(val) {
        this.pageInfo.curPage=val
        console.log(`当前页: ${val}`);
      },
      queryClick()
      {
        let url='/api/dispatching_management/query_order_on_require'
        let data={'queryContain':this.input,
          'queryType':this.select}
        const {data:res}=this.$http.post(url,data)
        if (res.code!==200)
        {
          return this.$message.error(res.msg)
        }
        else if (res.code==200)
        {
          // return this.$message.success('访问成功');
          this.tableData=res.data;
          console.log('访问成功');
          console.log(res.data);
        }
        // console.log('查询');
        // console.log(''+res.data);
      },
    },
    created() {
      this.getMessage()
      // this.queryClick()
    }

  };
</script>

<style scoped>
  .el-select .el-input {
    width: 80px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
